<template>
	<view class="page">
		<comHead ref="comHead" id="comHead" :datas="datasObj">
			<template #headerContent>
				<!--tab栏  -->
				<view class="tabBar flex pd-30" style="height: 132rpx;">
					<view class="item ft c-66 flex-center mr-20 bd-r20" :class="{ active: selectId === index }"
						v-for="(item, index) in tableList" :key="index" @click="selectBtn(index, item)">{{ item.name }}
					</view>
				</view>
			</template>
		</comHead>
		<view class="list">
			<view class="discuss_model" :class="{ 'mt-30': index > 0 }" v-for="(item, index) in orderList"
				:key='item.id'>
				<view class="ft-22 fw-400 c-66 text_center mb-10">订单时间{{ item.order_info.created_at }}</view>
				<!-- 单个列 -->
				<view class="discuss_model_item bd-r40 pd-20">
					<text class="ft-22 fw-400 c-66">订单号 {{ item.order_info.ordernum }}</text>
					<view class="discuss_model_item_content bd-r40">
						<view class="top">
							<view class="img-bor flex-center bd-r50c" v-if="item.sale_id > 0">
								<image class="icon bd-r50c" :src="item.cover" mode="aspectFill" />
							</view>
							<image class="imgs bd-r40" :src="item.cover" mode="aspectFill" v-else></image>
							<view class="userInfo">
								<text class="userName ft-32 fw-800 c-33 mt-10">{{ item.name }}</text>
								<view class="flex">
									<comRate :num="item.avg_star" disabled></comRate>
									<span class="ft-22 fw-400 c-99 ml-8"> ({{ item.evaluate_num }}人评价)</span>
								</view>
								<view class="ft-24 fw-400 c-33  mt-10"
									@click.stop="goPage('/subpackage/teacher/teacherDetail?id=' + item.sale_id)"
									v-if="item.sale_id > 0">
									查看老师
									<image class="icon_samll"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
									</image>
								</view>
								<view class="ft-24 fw-400 c-33  mt-10"
									@tap.stop="goPage('/subpackage/immigration/immigration?id=' + item.additional_id)"
									v-else-if="item.additional_id > 0">
									查看项目
									<image class="icon_samll"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
									</image>
								</view>
								<view class="ft-24 fw-400 c-33  mt-10"
									@tap.stop="goPage('/subpackage/immigration/immigration?id=' + item.product_id)"
									v-else-if="item.product_id > 0">
									查看项目
									<image class="icon_samll"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
									</image>
								</view>
							</view>
						</view>
						<view class="botn bd-r20">
							<!-- 气泡弹窗 -->
							<view v-if="selectId">
								<image class="icons" @click="showMoreIndex = showMoreIndex === index ? '' : index"
									src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png" mode="aspectFill">
								</image>
								<div class="bubble bubble-left ft-24 c-33" v-show="showMoreIndex === index">
									<view @click.stop="changeOrder('edit', index)">{{ '编辑' }}</view>
									<view @click.stop="changeOrder('delete', index)">{{ '删除' }}</view>
								</div>
							</view>
							<view class="option_model">
								<view class="rightM c-ff bd-r20 mr-20 ft-28" v-if="!selectId"
									@click.stop="goPage('/subpackage/appraise/appraiseServer?order_id=' + item.order_id + '&sale_id=' + item.sale_id + '&additional_id=' + item.additional_id + '&product_id=' + (item.additional_id == 0 ? item.product_id : 0))">
									<span>待评价</span>
								</view>
								<view class="rightM rightM-active c-ff bd-r20 mr-20 ft-28"
									@click.stop="goPage('/subpackage/search/detail?id=' + item.evaluate_id)" v-else>
									<span>查看详情</span>
								</view>
							</view>
						</view>

					</view>
				</view>

			</view>

			<view class="com-empty" v-if="orderList.length == 0">暂无数据</view>

		</view>
		<view style="height: 68rpx;"></view>
	</view>
	<!-- <dialogPop ref="diaLogPop" :option="option" @confirm='confirm' @cancel='cancel'></dialogPop> -->
	<dialogPop ref="diaLogPop" :show="showModal" title="删除订单" content='删除后可再次提交评价（不会有积分）。当前评价页面如分享过的评价内容页将会失效。'
		@confirm='confirm' @cancel='cancel'>
	</dialogPop>

</template>
<script setup lang="js">
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad,
	onShow,
	onReachBottom
} from "@dcloudio/uni-app";
import comRate from '@/components/comRate.vue'
import dialogPop from '@/components/dialogPop.vue';

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '评价',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 240,
	isBorder: true

})

let pageInfo = reactive({
	currentPage: 1,
	pageSize: 10
})
const tableList = ref([{
	id: 0,
	name: '待评价'
},
{
	id: 1,
	name: '已评价'
}
])
const option = reactive({
	html: `删除后可再次提交评价（不会有积分）。当前评价页面如分享过的评价内容页将会失效。`,
	title: '删除订单',
})
const showModal = ref(false)

// 弹窗取消时处理逻辑
const cancel = () => {
	showModal.value = false

	console.log('取消取消')
}

// 弹窗删除提交
const confirm = () => {
	showModal.value = false

	utils
		.request(
			api.deleteEvaluate, {
			id: evaluateId.value
		},
			"post"
		)
		.then((res) => {
			reloadData()
		});
}

const showMoreIndex = ref('')
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const evaluateId = ref('')
const changeOrder = (code, index) => {
	showMoreIndex.value = ''
	evaluateId.value = orderList.value[index].evaluate_id
	if (code == 'edit') {
		goPage('/subpackage/appraise/appraiseServer?id=' + evaluateId.value)
	} else if (code == 'delete') {
		showModal.value = true

	}
}
const isShow = ref(false)
// 选项点击切换
const selectId = ref(0)
const selectName = ref('')
const iconUrl = ref('')
const selectBtn = async (idx, item) => {
	selectId.value = idx
	selectName.value = item.name
	// 请求接口
	reloadData()
}

const reloadData = () => {
	orderPage.value = 1
	orderList.value = []
	orderLoading.value = true
	getOrderListData()
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
	orderLoading.value = true
	orderList.value = []
	getOrderListData()

})

const orderPage = ref(1)
const orderList = ref([])
const orderLoading = ref(true)
const getOrderListData = () => {
	if (!orderLoading.value) {
		return
	}
	uni.showLoading()
	orderLoading.value = false
	utils
		.request(
			api.getBenefitEvaluateList, {
			page: orderPage.value,
			pageSize: 10,
			evaluateStatus: selectName.value == '' ? '待评价' : selectName.value
		},
			"get"
		)
		.then((res) => {
			orderPage.value++
			if (res.data.items.length > 0) {
				orderList.value = orderList.value.concat(res.data.items)
			}
			if (orderPage.value <= res.data.pageInfo.totalPage) {
				orderLoading.value = true
			}
			uni.hideLoading()
		});
}

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}
// onLoad(() => {
// 	getOrderListData()
// })

onReachBottom(() => {
	getOrderListData()
})
</script>

<style lang="scss" scoped>
.tabBar {

	.item {
		padding: 0 20rpx;
		height: 72rpx;
		background: #f8f8f8;
	}

	.active {
		background: #dbf046;
	}
}

.list {
	padding-bottom: 20rpx;

	.discuss_model {
		&_item {
			background-color: #F8F8F8;
			width: 690rpx;
			margin: 0 auto;

			&_content {
				background-color: #FFFFFF;
				// height: 280rpx;
				// padding: 20rpx;
				margin-top: 20rpx;
				box-sizing: border-box;

				.top {
					// background-color: #DBF046;
					height: calc(100% - 108rpx);
					display: flex;
					padding: 20rpx 20rpx 0 20rpx;

					.img-bor {
						width: 108rpx;
						height: 108rpx;
						border: 4rpx solid #DBF046;


						.icon {
							width: 94.5rpx;
							height: 94.5rpx;
						}
					}

					.imgs {
						width: 222rpx;
						height: 274rpx;
						flex-shrink: 0;
					}

					.userInfo {
						height: 100%;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						// justify-content: space-evenly;
					}
				}

				.botn {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					position: relative;
					padding: 20rpx;
					// background-color: red;

					.icon1 {
						width: 24rpx;
						height: 16rpx;
						transform: rotate(-90deg);
					}

					.icons {
						width: 56rpx;
						height: 32rpx;
					}

					.option_model {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: flex-end;

						.leftM {
							display: flex;
							flex-direction: column;

							.icon {
								width: 36rpx;
								height: 36rpx;
							}

							.leftM_child2 {
								// background: linear-gradient(to right, #DBF046, #FFEE7E);
								margin-left: 10rpx;
							}
						}

						.rightM {
							width: 132rpx;
							height: 78rpx;
							line-height: 78rpx;
							text-align: center;
							// background-color: #F1F1F1;
							// color: #999999;
							background-color: #333333;
							color: #DBF046;

						}

						.rightM-active {
							background-color: #DBF046;
							color: #333;
						}

					}
				}


			}
		}
	}
}

.bubble {
	position: absolute;
	background: #fff;
	padding: 20rpx;
	border-radius: 10px;
	min-width: 100rpx;
	min-height: 40rpx;
	line-height: 40rpx;
	//   margin: 50px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	left: -20rpx;
	top: 100%;
	z-index: 3;
	text-align: center;
}

/* 修改重点在这里 ▼▼▼ */
.bubble::before {
	content: '';
	position: absolute;
	bottom: 100%;
	/* 定位到气泡顶部 */
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	/* 调整颜色方向 */
}

/* 可选 - 添加动画效果 */
.bubble {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>